<template>
  <div class="pagination">
    <ul>
      <li class="pre">
        <a href="/" class="btn">上一页</a>
      </li>
      <li class="next">
        <a href="/" class="btn">下一页</a>
      </li>
    </ul>
  </div>
</template>

<script>
</script>

<style scoped lang="stylus" rle="stylesheet/stylus">
/* 按钮样式 */
a.btn
  color: #868686;
  font-weight: 400;
a:link, a:visited
  opacity 1
  -webkit-transition all .30s linear;
  -moz-transition all .30s linear;
  -o-transition all .30s linear;
  -ms-transition all .30s linear;
  transition all .30s linear;
.btn
  width: 80px;
  height: 24px;
  display: inline-block;
  position: relative;
  outline: 0;
  color: rgba(0, 0, 0, 0.44);
  background: transparent;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  font-weight: 400;
  font-style: normal;
  border-radius: 999em;
  padding-top:10px
.btn:hover
  display: inline-block;
  position: relative;
  outline: 0px;
  color: #464545;
  background: transparent;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #464545;
  white-space: nowrap;
  font-weight: 400;
  font-style: normal;
  border-radius: 999em;
.pagination
  margin: 30px
  padding: 0px 0 56px 0
  border-bottom: 1px solid #f2f2f2
  ul
    list-style: none
    margin: 0
    padding: 0
    height: 13px
    li
      margin: 0 2px 0 2px
      display: inline
      line-height: 1
      a
        text-decoration: none
  .pre
    float: left
  .next
    float: right
</style>
